<template>
  <section class="settint-container">
    <header class="header">
      <div>配置项</div>
      <div class="close-btn-container">
        <v-btn icon @click="$emit('close')"> <j-icon size="15">mdi-close</j-icon></v-btn>
      </div>
    </header>
    <div class="setting-main">
      <v-container>
        <v-row>
          <v-col :cols="12">
            <v-select
              :items="firstSliderImgitems"
              label="首页背景图片配置"
              outlined
              :value="firstSliderBgImg"
              @input="handleChange('firstSliderBgImg', $event)"
            >
              <template v-slot:item="{ item }">
                <div class="select-item">
                  <div>{{ item.text }}</div>
                  <div>
                    <div style="width: 80px; height: 50px" :class="[item.value]"></div>
                  </div>
                </div>
              </template>
            </v-select>
          </v-col>
          <v-col :cols="12">
            <v-select
              :items="bgImageClassItems"
              label="歌词背景图片配置"
              outlined
              :value="bgImageClass"
              @input="handleChange('bgImageClass', $event)"
            >
              <template v-slot:item="{ item }">
                <div class="select-item">
                  <div>{{ item.text }}</div>
                  <div>
                    <div style="width: 80px; height: 50px" :class="[item.value]"></div>
                  </div>
                </div>
              </template>
            </v-select>
          </v-col>
          <v-col :cols="12">
            <v-select
              :items="textAligns"
              label="文本对齐方式"
              outlined
              :value="textAlign"
              @input="handleChange('textAlign', $event)"
            >
            </v-select>
          </v-col>
          <v-col :cols="12">
            <JcColorPickerVue label="字体颜色" :value="fontColor" @input="handleChange('fontColor', $event)" />
          </v-col>
          <v-col :cols="12">
            <JcColorPickerVue label="背景颜色" :value="bgColor" @input="handleChange('bgColor', $event)" />
          </v-col>
          <v-col :cols="12">
            <v-text-field :value="zhutiTitle" @input="handleChange('zhutiTitle', $event)" label="标题"></v-text-field>
          </v-col>

          <v-col :cols="12">
            <v-slider label="行数" :value="rows" :min="1" :max="10" :step="1" @input="handleChange('rows', $event)">
              <template v-slot:append>
                {{ rows }}
              </template>
            </v-slider>
          </v-col>
          <v-col :cols="12">
            <v-slider
              label="标题字号"
              :value="titleFontSize"
              :min="1"
              :max="500"
              :step="1"
              @input="handleChange('titleFontSize', $event)"
            >
              <template v-slot:append>
                {{ titleFontSize }}
              </template>
            </v-slider>
          </v-col>
          <v-col :cols="12">
            <v-slider label="字号" :value="fontSize" :min="0" :max="280" @input="handleChange('fontSize', $event)">
              <template v-slot:append>
                {{ fontSize }}
              </template>
            </v-slider>
          </v-col>
          <v-col :cols="12">
            <v-slider
              label="字体阴影"
              :value="textShadow"
              :min="0"
              :max="5"
              @input="handleChange('textShadow', $event)"
            >
              <template v-slot:append>
                {{ textShadow }}
              </template>
            </v-slider>
          </v-col>
          <v-col :cols="12">
            <v-slider label="行高" :value="lineHeight" :min="0" :max="580" @input="handleChange('lineHeight', $event)">
              <template v-slot:append>
                {{ lineHeight }}
              </template>
            </v-slider>
          </v-col>
          <v-col :cols="12">
            <JcColorPickerVue
              label="描边颜色"
              :value="textStorkeColor"
              @input="handleChange('textStorkeColor', $event)"
            />
          </v-col>
          <v-col :cols="12">
            <v-slider
              label="描边宽度"
              :value="textStorkeWidth"
              :min="0"
              :max="3"
              @input="handleChange('textStorkeWidth', $event)"
            >
              <template v-slot:append>
                {{ textStorkeWidth }}
              </template>
            </v-slider>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </section>
</template>
<script>
import Timg from "@/assets/T.jpg";
import Img24 from "@/assets/24.jpg";
import Img70 from "@/assets/70.jpg";
import JianBianImg from "@/assets/touyingbg1.jpeg";
import "../index.css";
import JcColorPickerVue from "../../../components/JcColorPicker.vue";

const NumberType = {
  type: Number,
  default: 3,
};
export default {
  name: "JcSetting",
  components: { JcColorPickerVue },
  props: {
    zhutiTitle: {
      type: String,
      default: "",
    },
    firstSliderBgImg: {
      type: String,
      default: "firstBgjb-t",
    },
    rows: NumberType,
    lineHeight: NumberType,
    fontSize: NumberType,
    titleFontSize: NumberType,
    fangYingUrl: {
      type: String,
      default: "",
    },
    fontColor: {
      type: String,
      default: "#fff",
    },
    bgColor: {
      type: String,
      default: "#4527A0",
    },
    bgImageClass: {
      type: String,
      default: "bgjb",
    },
    textShadow: {
      type: Number,
      default: 0,
    },
    textAlign: { type: String, default: "center" },
    textStorkeWidth: { type: [Number, String], default: 0 },
    textStorkeColor: { type: String, default: "" },
  },
  data() {
    return {
      colorPickerVisiable: false,
      pageId: "",
      configs: {},
      firstSliderImgitems: [
        {
          value: "firstBgjb-24",
          text: "24",
          url: Img24,
          class: "firstBgjb-24",
        },
        {
          value: "firstBgjb-70",
          text: "70",
          url: Img70,
          class: "firstBgjb-70",
        },
        {
          value: "firstBgjb-t",
          text: "Thnone",
          url: Timg,
          class: "firstBgjb-t",
        },
        {
          value: "chunse",
          text: "纯背景色",
          url: JianBianImg,
          class: "chunse",
        },
      ],
      bgImageClassItems: [
        {
          value: "bgjb",
          text: "渐变色",
          url: JianBianImg,
          class: "bgjb",
        },
        {
          value: "chunse",
          text: "纯背景色",
          url: JianBianImg,
          class: "chunse",
        },
      ],
      textAligns: ["left", "center", "right"],
    };
  },
  methods: {
    handleChange(type, val) {
      switch (type) {
        case "bgColor":
          document.documentElement.style.setProperty("--touying-bg-color", val);
          break;
      }
      this.$emit(`update:${type}`, val);
    },
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 48px;
  background: purple;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  color: #fff;
  margin-bottom: 10px;
}
.setting-main {
  padding: 0px;
}
.select-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
